<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/WEB-INF/templates/master_frame.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:my="http://java.sun.com/jsf/composite/components">
         
         <ui:define name="title"> - Product Showcase</ui:define>    
         
         <ui:define name="css">
         	<link rel="stylesheet" href="#{request.contextPath}/resources/css/demo.css"/>
         </ui:define>
         
         <ui:define name="javascript">
	        
         	<h:outputScript library="js" name="demo.js"></h:outputScript>
         	<h:outputScript library="js" name="highlight.js"></h:outputScript>
         	<h:outputScript library="js" name="html5.js"></h:outputScript>
         	<h:outputScript library="js" name="html-xml.js"></h:outputScript>
         	<h:outputScript library="js" name="css.js"></h:outputScript>
         	<h:outputScript library="js" name="javascript.js"></h:outputScript>
         </ui:define>
         
         <ui:define name="content">
         
         <script>
		    hljs.tabReplace = '    ';
		    hljs.initHighlightingOnLoad();
		  </script>
         
         	<h1>Products and Dynamic-Pricing-Service</h1>
         	We offer our customers selected quality rims and a dynamicly-priced tyre to it. It offers our customers and partners the confidence of buying a save quality wheel with a favourable financial deal.
         	<p/>	
	    		<div id="slide">			  	
					<!-- slider -->
					<div class="gallery">
						<ul class="items">
							<li><h:graphicImage library="images" name="productgallery/anzio_light.png"/><div class="banner"><span>Anzio Light</span></div></li>
							<li><h:graphicImage library="images" name="productgallery/rial_campo.jpg"/><div class="banner"><span>Rial Campo</span></div></li>
							<li><h:graphicImage library="images" name="productgallery/anzio_light.png"/><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
							<li><h:graphicImage library="images" name="productgallery/rial_campo.jpg"/><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li>
							</ul>
					</div>
					<a href="#" class="prev">&lt;</a> <a href="#" class="play"><em>stop</em><span>play</span></a> <a href="#" class="next">&gt;</a>
					<!-- slider end -->	
				</div>		
				<div class="pag">
					<div class="img-pags">
					  <ul>
						<li><a href="#"><span><h:graphicImage library="images" name="productgallery/anzio_light_thumb.png"/></span></a></li>
						<li><a href="#"><span><h:graphicImage library="images" name="productgallery/rial_campo_thumb.jpg"/></span></a></li>
						<li><a href="#"><span><h:graphicImage library="images" name="productgallery/anzio_light_thumb.png"/></span></a></li>
						<li><a href="#"><span><h:graphicImage library="images" name="productgallery/rial_campo_thumb.jpg"/></span></a></li>									
					  </ul>  
					</div>								
					<a href="#" class="button button1" data-type="prevPage">&lt;</a>
					<a href="#" class="button button2" data-type="nextPage">&gt;</a>
				</div>         
         </ui:define>
</ui:composition>
